<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="common/layout">
<head>
    <title>菜品管理</title>

    <script th:inline="javascript">
        $(function(){
            Paginator.init(
                    [[${total}]],
                    function(page){
                        var querys={};
                        querys["page"] = page;
                        if([[${key_word}]]){
                            querys["key_word"] = [[${stat_key}]];
                        }
                        var url = "/admin/menu?" + $.param(querys);
                        self.location.href = url;
                    },
                    [[${page}]]
            );
        });

        function menuRemove(menu_id) {
            if (!confirm("确定删除吗？")) {
                return;
            }
            $.post("/admin/menu/" + menu_id, {_method: "DELETE"}, function (data) {
                if (data.success) {
                    self.location.reload();
                } else {
                    alert(data.message);
                }
            });
        };

        function soldOutToggle(menu_id, sold_out) {
            $.post("/admin/menu/soldout", {menu_id: menu_id,sold_out:sold_out}, function (data) {
                if (data.success) {
                    if (sold_out == 0) {
                        $("#action_soldout_" + menu_id).text("取消沽清");
                        $("#action_soldout_" + menu_id).attr('href', 'javascript:soldOutToggle(' + menu_id + ',' + 1 + ')')
                    }else{
                        $("#action_soldout_" + menu_id).text("沽清");
                        $("#action_soldout_" + menu_id).attr('href', 'javascript:soldOutToggle(' + menu_id + ',' + 0 + ')')
                    }
                }
            });
            return;
        }

        $("#menu_category li").click(function() {
            var queries={};
            queries["category_id"] = $(this).val();
            var url = "/admin/menu?" + $.param(queries);
            self.location.href = url;
        });

        function GetAbsPosition(obj)
        {
            var curleft = 0, curtop = 0;
            do {
                curleft += obj.offsetLeft;
                curtop += obj.offsetTop;
            } while (obj = obj.offsetParent);

            return [curleft,curtop];
        }

        function ShowFloatingImage(image, width, height)
        {
            var id = "trailimageid";
            var newdiv = document.getElementById(id);
            /*if(newdiv == null)
             {
             newdiv = document.createElement('div');
             newdiv.setAttribute('id',id);
             newdiv.setAttribute('onmouseout', "HideElement('"+id+"');");
             document.body.appendChild(newdiv);
             }*/
            if(newdiv != null){
                newdiv.remove();
            }
            newdiv = document.createElement('div');

            newdiv.setAttribute('id',id);
            newdiv.setAttribute('onmouseout', "HideElement('"+id+"');");
            image.parentNode.appendChild(newdiv);
//                image.parent().append(newdiv);

            newdiv.innerHTML = '<img src='+image.src+ ' width='+(image.width + width) + ' height=' + (image.height + height) + ' />';

            var absPos = GetAbsPosition(image);
            newdiv.style.position = "absolute";
            newdiv.style.posLeft = absPos[0] - width/2;
            newdiv.style.posTop = absPos[1] - height/2;
            newdiv.style.display="block";
        }

        function HideElement(id)
        {
            var elem = document.getElementById(id);
            elem.remove();
        }

    </script>
</head>

<body>
<section layout:fragment="top_menu" style="text-align: right;padding-right: 20px">
    <div>
        <input type="button" class="new_button_yellow input_add" onclick="location.href='/admin/menu/new'" value="添加">
        <!--<a href="/menu/new" >添加菜品</a>-->
    </div>
</section>
<section layout:fragment="content">

      <div class="list" style="font-size:0.9em;">
          <table id="list">
              <tr class="header">
                  <td>序号</td>
                  <td>菜名</td>
                  <td>
                      <div class="dropdown">
                          <div class="dropdown-toggle login-info" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                              类别<span class="caret"></span>
                          </div>
                          <ul id="menu_category" class="dropdown-menu" aria-labelledby="dropdownMenu1">
                              <li class="menu-item"  th:each="category :${categories}"
                                  th:value="${category.id}"
                                  th:text="${category.categoryMenu}"></li>
                          </ul>
                      </div>
                  </td>
                  <td>单价</td>
                  <td>单位</td>
                  <td>折扣</td>
                  <td>推荐</td>
                  <td>停售</td>
                  <td>图片</td>
                  <td>操作</td>
              </tr>
              <tbody id="list_body">
              <tr th:each="item,row:${rows}" th:id="${#strings.concat('item_', item.id)}" th:class="${#strings.concat('item_', row.index%2)}">
                  <td th:text="${row.index+1 + (page-1)*perpage}">
                  </td>
                  <td th:text="${item.name}">
                      <!--<a th:href="@{/menu/{id}(id=${item.id})}" th:text="${item.name}"></a>-->
                  </td>
                  <td th:text="${item.categoryName}"></td>
                  <td th:text="${item.unitPrice}"></td>
                  <td th:text="${item.unitName}"></td>
                  <td th:text="${item.discount}"></td>
                  <td th:text="${item.recommendFlag}"></td>
                  <td th:text="${item.stopSaleFlag}"></td>
                  <td>
                      <img th:if="${item.menuPicUrl}" th:src="${item.menuPicUrl}" width="30" height="30" onmouseover="ShowFloatingImage(this, 150, 150);">
                      <img th:unless="${item.menuPicUrl}" src="/img/avatar.png" width="30" height="30" onmouseover="ShowFloatingImage(this, 150, 150);">
                      <!--<img  src="/img/avatar.png" width="30" height="30" onmouseover="ShowFloatingImage(this, 150, 150);">-->
                  </td>
                  <td>
                      <a class="icon-remove" th:href="${#strings.concat('javascript:menuRemove(',item.id, ')')}">删除</a>
                      <a  class="icon-edit" th:href="${#strings.concat('/admin/menu/edit/',item.id)}">编辑</a>
                      <a class="icon-soldout" th:id="${#strings.concat('action_soldout_',item.id)}" th:href="${#strings.concat('javascript:soldOutToggle(',item.id,',',item.soldOut, ')')}" th:text="(${item.soldOut == 1})?'取消沽清':'沽清'"></a>
                  </td>
              </tr>
              </tbody>
          </table>
          <div class="paginator">
              <ul>
                  <li><</li>
                  <li>1</li>
                  <li>2</li>
                  <li>3</li>
                  <li class="dot">...</li>
                  <li>9</li>
                  <li>></li>
              </ul>
          </div>
      </div>
</section>

</body>

</html>
